/*
 * Copyright (c) 2022 LookerSong
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import animator from '@ohos.animator';

export default {
    props: {
        duration: {
            type: Number,
            default: 2000,      //膨胀动画完成所需时间，默认2秒
        },
        btnColor: {
            type: String,
            default: '#9D9D9D',     // 按钮颜色
        },
        ringColor: {
            type: String,
            default: '#82D900',     // 膨胀过程外圈颜色
        },
        finishColor: {
            type: String,
            default: '#FFFF37',     // 完成时外圈阴影颜色
        }
    },
    data: {
        disabled: false,        //按钮处于非禁用状态
        divR: 50,       //按钮初始半径
        animator: null,
    },
    onInit() {
        //膨胀动画初始化创建声明
        let options = {};
        this.animator = animator.createAnimator(options);
    },
    Show() {
        //打印按钮当前状态为“正在点击”
        this.$emit('btnType', {btnstate: '点击'});
        console.log("————按钮状态：点击中————");
        const el = this.$refs.canvas1;
        const ctx = el.getContext('2d', { antialias: true });
        //画外圈，用于提示长按进度
        ctx.lineWidth = 5;
        ctx.strokeStyle = this.ringColor;
        ctx.beginPath();
        ctx.arc(150, 150, 100, 0, 6.28);
        ctx.stroke();
        console.log("外圈显现，按钮膨胀");
        //膨胀动画
        let options1 = {
            duration: this.duration,     //运行时间
            easing: 'linear',       //动画时间曲线
            fill: 'forwards',       //指定动画起始态或终止态
            iterations: 1,      //播放次数
            begin: 50.0,        //播放起点
            end: 100.0,     //播放终点
        }
        this.animator.update(options1);
        let _this = this;
        this.animator.onframe = function(value) {
            _this.divR = value;
            //外部色圈显现，提示启动事件准备就绪
            if(100 == _this.divR) {
                ctx.beginPath();
                ctx.arc(150, 150, 120, 0, 6.28);
                ctx.shadowBlur = 1;
                ctx.shadowColor = _this.finishColor;
                ctx.stroke();
                console.log("准备就绪，松开触发");
            }
        };
        this.animator.play();
    },
    Erase() {
        //打印按钮当前状态为“松开”
        this.$emit('btnType', {btnstate: '松开'});
        console.log("————按钮状态：松开————");
        //重置动画
        let options2 = {
            duration: 0,        //运行时间
            easing: 'linear',       //动画时间曲线
            fill: 'forwards',       //指定动画起始态或终止态
            iterations: 1,      //播放次数
            end: 50.0,      //播放终点为初始起点
        }
        this.animator.update(options2);
        let _this = this;
        this.animator.onframe = function(value) {
            _this.divR = value;
        };
        //成功启动事件
        if(100 == _this.divR) {
            this.disabled = true;       //按钮失效，不可点击
            //向父组件传递事件的状态值为true
            this.$emit('eventType', {eventstate: true});
            console.log("启动成功");
        }
        //启动失败，擦除提示外圈
        else {
            const el = this.$refs.canvas1;
            const ctx = el.getContext('2d');
            ctx.clearRect(45, 45, 210, 210);
            console.log("启动失败")
            console.log("外圈擦除，按钮重置");
        }
    },
}